<template>
  <div class="data-import-container">
    <el-alert
      title="数据导入说明"
      type="info"
      description="支持Excel格式数据导入，小程序录入的表除外。请选择对应的数据模块后再上传文件。"
      :closable="false"
      show-icon>
    </el-alert>

    <div class="module-selector">
      <el-form :model="importForm" label-width="100px" class="import-form">
        <el-form-item label="数据模块">
          <el-select v-model="importForm.module" placeholder="请选择数据模块">
            <el-option label="学习模块" value="study"></el-option>
            <el-option label="生活模块" value="life"></el-option>
            <el-option label="思想模块" value="thought"></el-option>
            <el-option label="健康模块" value="health"></el-option>
            <el-option label="社交模块" value="social"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="数据类型" v-if="importForm.module">
          <el-select v-model="importForm.dataType" placeholder="请选择数据类型">
            <el-option
              v-for="option in dataTypeOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <el-upload
      class="upload-demo"
      drag
      action="http://118.195.171.239:8081/system/importData"
      :headers="uploadHeaders"
      :data="uploadData"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="beforeUpload"
      :disabled="!canUpload"
      accept=".xlsx,.xls"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">
        <span v-if="canUpload">支持Excel文件格式(.xlsx, .xls)</span>
        <span v-else class="warning-text">请先选择数据模块和数据类型</span>
      </div>
    </el-upload>

    <el-dialog
      title="导入结果"
      :visible.sync="resultDialogVisible"
      width="30%">
      <div v-if="importSuccess">
        <el-alert
          title="导入成功"
          type="success"
          :description="resultMessage"
          show-icon>
        </el-alert>
      </div>
      <div v-else>
        <el-alert
          title="导入失败"
          type="error"
          :description="resultMessage"
          show-icon>
        </el-alert>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DataImport',
  data() {
    return {
      resultDialogVisible: false,
      importSuccess: false,
      resultMessage: '',
      importForm: {
        module: '',
        dataType: ''
      },
      moduleDataTypes: {
        study: [
          { label: '主动回答问题', value: 'proactive' },
          { label: '竞赛情况', value: 'competition' },
          { label: '图书馆使用', value: 'library' },
          { label: '作业评级', value: 'homework' },
          { label: '成绩对比', value: 'score' }
        ],
        life: [
          { label: '请假缺勤', value: 'leave' },
          { label: '饭卡信息', value: 'mealcard' },
          { label: '内务信息', value: 'housekeeping' },
          { label: '外出信息', value: 'out' }
        ],
        thought: [
          { label: '军容风纪', value: 'jrfj' },
          { label: '纠察记录', value: 'picket' },
          { label: '保密检查', value: 'security' }
        ],
        health: [
          { label: '体测数据', value: 'sportstest' },
          { label: '988就诊', value: 'visitdoctor' }
        ],
        social: [
          { label: '参与活动', value: 'activities' },
          { label: '自主学术讲座', value: 'lecture' },
          { label: '公差勤务', value: 'business' },
          { label: '晚加班', value: 'overtime' }
        ]
      },
      uploadHeaders: {
        'Content-Type': 'multipart/form-data'
      }
    }
  },
  computed: {
    dataTypeOptions() {
      return this.importForm.module ? this.moduleDataTypes[this.importForm.module] : [];
    },
    canUpload() {
      return this.importForm.module && this.importForm.dataType;
    },
    uploadData() {
      return {
        module: this.importForm.module,
        dataType: this.importForm.dataType
      };
    }
  },
  methods: {
    beforeUpload(file) {
      if (!this.canUpload) {
        this.$message.error('请先选择数据模块和数据类型');
        return false;
      }

      const isExcel = file.name.toLowerCase().endsWith('.xlsx') || file.name.toLowerCase().endsWith('.xls');
      if (!isExcel) {
        this.$message.error('只支持Excel文件格式(.xlsx, .xls)');
        return false;
      }

      return true;
    },
    handleSuccess(response, file) {
      if (response.code === '200' || response.code === 200) {
        this.importSuccess = true;
        this.resultMessage = `文件 ${file.name} 导入成功，共导入 ${response.data || 0} 条数据`;
      } else {
        this.importSuccess = false;
        this.resultMessage = `文件 ${file.name} 导入失败: ${response.msg || '未知错误'}`;
      }
      this.resultDialogVisible = true;
    },
    handleError(err, file) {
      this.importSuccess = false;
      this.resultMessage = `文件 ${file.name} 导入失败: ${err.message || '服务器错误'}`;
      this.resultDialogVisible = true;
    }
  }
}
</script>

<style scoped>
.data-import-container {
  padding: 20px;
}
.module-selector {
  margin: 20px 0;
}
.import-form {
  max-width: 500px;
  margin: 0 auto;
}
.upload-demo {
  text-align: center;
  margin-top: 20px;
}
.warning-text {
  color: #E6A23C;
}
</style>
